<template>
  <div>
    <ul>
      <li v-for="i in list" :key="i.vid" @click="toVideo(i.vid)">
        <div>
          <img :src="i.coverUrl" alt="" />
          <span class="author">by {{ i.creator[0].userName }}</span>
          <span class="time">{{ getTime(i.durationms) }}</span>
          <span class="count">
            <i class="el-icon-caret-right"></i
            >{{ getPlayCount(i.playTime) }}</span
          >
        </div>
        <div class="name">{{ i.title }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  computed: {
    getTime() {
      return function (time) {
        let min = Math.floor(time / 60000).toString()[1]
          ? Math.floor(time / 60000).toString()
          : "0" + Math.floor(time / 60000).toString();
        let sec = Math.floor(time % 60000)
          .toString()
          .slice(0, 2);
        return min + ":" + sec;
      };
    },
    getPlayCount() {
      return function (count) {
        if (count >= 10000) {
          count = parseInt(count / 10000);
          return count + "万";
        } else {
          return count;
        }
      };
    },
  },
  methods:{
      toVideo(id){
         
          this.$router.push({name:'playVideo',query:{vid:id}})
        
      }
  },
  mounted() {
    this.$request({
      url: "/search",
      params: {
        keywords: this.$route.query.keywords,
        type: 1014,
      },
    }).then((success) => {
      this.list = success.data.result.videos;
    });
  },
};
</script>

<style scoped>
ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
li {
  position: relative;
  width: 300px;
  margin-bottom: 40px;
}
li img {
  width: 300px;
  height: 150px;
  border-radius: 10px;
}
.name {
  margin-top: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.author {
  position: absolute;
  left: 0;
  bottom: -20px;
  color: gray;
}
.time {
  position: absolute;
  right: 10px;
  bottom: 35px;
  color: white;
}
.count {
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
}
</style>